<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    body {
        perspective:1000px;
        background-color: skyblue;
    }
        .box {
            margin: 200px auto;
            width: 200px;
            height: 200px;
            position: relative;
             transform-style:preserve-3d;
             transform:rotateX(30deg) rotateY(30deg);
        }
        .item {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 10px 10px 20px gold,-10px -10px 20px gold;
           background-color: rgba(200, 100, 100, .5);
            position: absolute;
        }
        .item:nth-child(1){transform:rotateY(0deg) translateZ(200px);}
        .item:nth-child(2){transform:rotateY(60deg) translateZ(200px);}
        .item:nth-child(3){transform:rotateY(120deg) translateZ(200px);}
        .item:nth-child(4){transform:rotateY(180deg) translateZ(200px);}
        .item:nth-child(5){transform:rotateY(240deg) translateZ(200px);}
        .item:nth-child(6){transform:rotateY(300deg) translateZ(200px);}


        .item:nth-child(7){transform:rotateX(0deg) translateZ(200px);}
        .item:nth-child(8){transform:rotateX(60deg) translateZ(200px);}
        .item:nth-child(9){transform:rotateX(120deg) translateZ(200px);}
        .item:nth-child(10){transform:rotateX(120deg) translateZ(200px);}
        .item:nth-child(11){transform:rotateX(240deg) translateZ(200px);}
        .item:nth-child(12){transform:rotateX(300deg) translateZ(200px);}


        .item:nth-child(13){transform: rotateZ(45deg) rotateX(0deg) translateZ(200px);}
        .item:nth-child(14){transform: rotateZ(45deg) rotateX(60deg) translateZ(200px);}
        .item:nth-child(15){transform: rotateZ(45deg) rotateX(120deg) translateZ(200px);}
        .item:nth-child(16){transform: rotateZ(45deg) rotateX(120deg) translateZ(200px);}
        .item:nth-child(17){transform: rotateZ(45deg) rotateX(240deg) translateZ(200px);}
        .item:nth-child(18){transform: rotateZ(45deg) rotateX(300deg) translateZ(200px);}


        .item:nth-child(19){transform: rotateZ(-45deg) rotateX(0deg) translateZ(200px);}
        .item:nth-child(20){transform: rotateZ(-45deg) rotateX(60deg) translateZ(200px);}
        .item:nth-child(21){transform: rotateZ(-45deg) rotateX(120deg) translateZ(200px);}
        .item:nth-child(22){transform: rotateZ(-45deg) rotateX(120deg) translateZ(200px);}
        .item:nth-child(23){transform: rotateZ(-45deg) rotateX(240deg) translateZ(200px);}
        .item:nth-child(24){transform: rotateZ(-45deg) rotateX(300deg) translateZ(200px);}
         @keyframes ddomove {
           to {
                transform: rotateY(360deg) rotateZ(360deg);
            }
        }
         .animation2 {
            animation: ddomove 2s 1  linear;
        }
         @keyframes domove {
            from {
                transform: rotateY(0deg) rotateZ(0deg);
            }
        }
         .animation1 {
            animation: domove 2s 1  linear;
        }
        @keyframes move {
            from {
                transform: rotateY(0deg) rotateZ(0deg);
            }
            to {
                transform: rotateY(360deg) rotateZ(360deg);
            };
        }
        .animation {
            animation: move 3s infinite  linear;
        }

        button {
            width: 150px;
            height: 35px;
            background-color: darkblue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <button > Are U  Ready ?</button>
   <div class="box ">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>


        <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>


       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>



       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
   </div>
   <script>
       // document.querySelector('.box').onmouseover= function(){
       //  document.querySelector('.box').style.animationPlayState="paused";
       // };
       // document.querySelector('.box').onmouseout= function(){
       //  document.querySelector('.box').style.animationPlayState="running";
       // };
       //
        //    animation: domove 1s linear 1, ddomove 1s linear 1;
        var items = document.querySelectorAll('.item');
        var timer=null;
        var flag = true;
        document.querySelector('button').onclick = function(){
            if (flag){
             document.querySelector('.box').classList.toggle("animation");
             document.querySelector('.box').style.animationPlayState="running";
            } else {
               // document.querySelector('.box').classList.remove("animation");
                document.querySelector('.box').style.animationPlayState="paused";
            }
            flag = !flag;
        }

         for (var i = 0; i < items.length; i++) {
           items[i].classList.add("animation1");
       };

       setTimeout(function(){
         for (var i = 0; i < items.length; i++) {
           items[i].classList.remove("animation1");
           items[i].classList.add("animation2");
       };
       },2000)



        clearInterval(timer);
         timer = setInterval(function(){
         for (var i = 0; i < items.length; i++) {
           items[i].classList.add("animation1");
       };

       setTimeout(function(){
         for (var i = 0; i < items.length; i++) {
           items[i].classList.remove("animation1");
           items[i].classList.add("animation2");
       };
       },2000)
      },4000);

   </script>
</body>
</html>